<script setup>
import {reactive, ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem("code_user") || '{}'),
  noticeData: [],
})

const loadNotice = () => {
  request.get('/notice/selectAll').then(res => {
    if (res.code === '200') {
      data.noticeData = res.data
      //截断一下，数据超过3条只显示3条
      if (data.noticeData.length > 3){
        data.noticeData = data.noticeData.slice(0,3)
      }
    } else {
      ElMessage.error(res.msg)
    }
  })
}

loadNotice()

</script>

<template>
  <div class="card">你好</div>
  <div class="card" style="margin-top: 10px;width: 50%">
    <div style="font-size: 18px;margin-bottom: 20px">系统公告</div>
    <el-timeline style="max-width: 600px">
      <el-timeline-item v-for="item in data.noticeData" :timestamp="item.time" placement="top" color="#0bbd87" >
        <h4>{{ item.title }}</h4>
        <p>{{ item.content }}</p>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<style scoped>

</style>